<template>
  <div>
    <el-dialog
      title="年龄段设置"
      :visible.sync="setDialogVisible"
      width="400px" :close-on-click-modal="false" :close-on-press-escape="false"
      append-to-body
      @close="dialogClosed"
      >
      <el-form :model="ageRangeForm" ref="ageRangeForm" label-width="120px" :rules="ageRangeFormRules">
        <el-form-item label="开始年龄" prop="ageStart">
          <el-input-number v-model="ageRangeForm.ageStart" :min="0" :max="100" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="结束年龄" prop="ageEnd">
          <el-input-number v-model="ageRangeForm.ageEnd" :min="0" :max="100" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="步长" prop="ageRange">
          <el-input-number v-model="ageRangeForm.ageRange" :min="0" :max="100" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="savesetting">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div id="webdata" v-show="mydata.length>0"></div>
    <div v-show="mydata.length===0">无统计分析数据</div>
  </div>
</template>
<script>
import WebDataRocks from 'webdatarocks'
import zhcn from 'webdatarocks/zh.json'
export default {
  props: {
    // myheight: Number,
    timestamp: String,
    url: String,
    para: {},
    afterchartdraw: Function,
    aftergriddraw: Function,
    beforegriddraw: Function,
    beforetoolbarcreated: Function,
    cellclick: Function,
    celldoubleclick: Function,
    componentFolder: String,
    customizeCell: Function,
    customizeContextMenu: Function,
    datachanged: Function,
    dataerror: Function,
    datafilecancelled: Function,
    dataloaded: Function,
    fieldslistclose: Function,
    fieldslistopen: Function,
    filterclose: Function,
    filteropen: Function,
    fullscreen: Function,
    global: Object,
    height: [String, Number],
    loadingdata: Function,
    loadinglocalization: Function,
    loadingolapstructure: Function,
    loadingreportfile: Function,
    localizationerror: Function,
    localizationloaded: Function,
    olapstructureerror: Function,
    olapstructureloaded: Function,
    openingreportfile: Function,
    querycomplete: Function,
    queryerror: Function,
    ready: Function,
    report: [String, Object],
    reportchange: Function,
    reportcomplete: Function,
    reportfilecancelled: Function,
    reportfileerror: Function,
    reportfileloaded: Function,
    runningquery: Function,
    toolbar: Boolean,
    update: Function,
    width: [Number, String],
    theYear: ''
  },
  name: 'webData',
  data () {
    return {
      backtoFullscreen: false,
      webdatarocks: {},
      ageRangeForm: {
        ageStart: 20,
        ageEnd: 60,
        ageRange: 5
      },
      ageRangeFormRules: {
        ageStart: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        ageEnd: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        ageRange: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      },
      mydata: [],
      myrows: [
        {
          'uniqueName': '所属处室'
        },
        {
          'uniqueName': '单位名称'
        }
      ],
      mycolumns: [
        {
          'uniqueName': '年龄段'
        }
      ],
      setDialogVisible: false
    }
  },
  mounted () {
    this.init()
    this.getData()
  },
  methods: {
    savesetting () {
      this.dialogClosed()
      this.$refs.ageRangeForm.validate((valid) => {
        if (valid) {
          this.setDialogVisible = false
          this.getData()
        }
      })
    },
    getData () {
      if (this.url !== '' && this.para !== {}) {
        let mypara = {...this.para}
        if (this.theYear) {
          mypara.theYear = this.theYear
        }
        mypara.ageRange = [this.ageRangeForm.ageStart, this.ageRangeForm.ageEnd, this.ageRangeForm.ageRange]
        console.log('mypara')
        console.log(JSON.stringify(mypara))
        this.$http
          .post(this.url, mypara)
          .then(response => {
            if (response.data.success) {
              this.mydata = response.data.result
              // if (this.mydata.length === 0) {
              //   this.$message({
              //     message: '暂无复合搜索条件的数据',
              //     type: 'error'
              //   })
              //   this.$emit('dialogHide')
              // } else {
              this.webdatarocks.updateData({
                'data': this.mydata
              })
              this.newtabHandlerTemplate('dw')
              // }
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
          })
      }
    },
    init () {
      let clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      console.log(clientHeight)
      this.webdatarocks = new WebDataRocks({
        ...this.$props,
        container: '#webdata',
        height: clientHeight - 145,
        beforetoolbarcreated: this.customizeToolbar,
        global: {
          localization: zhcn
        }
      })
      this.webdatarocks.expandAllData()
    },
    dialogClosed () {
      if (this.backtoFullscreen) {
        console.log('backfullscreen')
        // this.webdatarocks.fullscreen = true
        let element = document.getElementById('webdata')
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          var ua = navigator.userAgent
          if ((ua.indexOf('Safari') > -1) && (ua.indexOf('Chrome') === -1)) {
            element.webkitRequestFullScreen()
          } else {
            element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
          }
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) { // IE 11
          if (window === top) {
            element.msRequestFullscreen()
          } else {
            alert('Fullscreen mode in IE 11 is not currently supported while Pivot embeded in iframe.')
          }
        }
        this.backtoFullscreen = false
      }
    },
    customizeToolbar (toolbar) {
    // get all tabs
      let that = this
      function myexpandAll () {
        console.log('expandAll')
        that.webdatarocks.expandAllData()
      }
      function mycollapseAll () {
        console.log('collapseAll')
        that.webdatarocks.collapseAllData()
      }
      function newtabHandlerAgeRange () {
        if (toolbar.isFullscreen()) {
          toolbar.exitFullscreen()
          that.backtoFullscreen = true
        }
        that.setDialogVisible = true
      }
      var tabs = toolbar.getTabs()
      toolbar.getTabs = () => {
        delete tabs[0]
        delete tabs[1]
        delete tabs[2]
        delete tabs[3]
        // delete tabs[3].menu[0]
        // delete tabs[3].menu[1]
        // delete tabs[3].menu[3]
        // There will be two new tabs at the beginning of the Toolbar
        tabs.push({
          'title': '模板',
          'id': 'wdr-tab-template',
          'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>常用分析模板</title><g fill="#555"><path d="M11.351 787.279c1.112.367 2.027 1.221 2.55 2.221H13.5v-10.627c0-.744-.089-1.357-.825-1.373h-26.339c-.736.008-.836.612-.836 1.349v21.656c0 .735.093.995.836.995h10.836c-.008 0 .205-1.314.629-2.025-.073-.098-.123.025-.18.025H-12.5v-6h10.563l.83-1.699c.4-.76 1.606-1.258 1.606-1.667V785.5h10.843l.009 1.779zM-1.5 791.5h-11v-6h11v6z"/><path d="M15.805 801.444l-1.602-1.308c0-.237.082-.49.082-.817a2.483 2.483 0 0 0-.082-.817l1.602-1.389a.399.399 0 0 0 .082-.49l-1.528-2.86a.364.364 0 0 0-.278-.123.678.678 0 0 0-.18 0l-1.912.866a6.95 6.95 0 0 0-1.299-.817l-.311-1.989c-.017-.195-.188-.199-.384-.199H6.93c-.147 0-.384.037-.384.199l-.311 2.053c-.458.229-.899.468-1.299.786l-1.912-.834c-.041-.008-.09-.016-.131-.008a.356.356 0 0 0-.319.192l-1.528 2.817c-.082.164-.082.408.082.489l1.749 1.308c0 .237-.082.489-.082.816a2.48 2.48 0 0 0 .082.817l-1.602 1.356a.399.399 0 0 0-.082.49l1.528 2.86a.364.364 0 0 0 .278.123.678.678 0 0 0 .18 0l1.912-.817c.4.318.842.597 1.299.817l.311 2.116a.322.322 0 0 0 .221.4c.033.008.065.017.09.017h3.065c.147 0 .384-.164.384-.327l.311-2.215c.466-.212.907-.49 1.299-.817l1.831.817a.441.441 0 0 0 .54-.163l1.528-2.86c.056-.08-.018-.326-.165-.489zm-7.306.744a2.865 2.865 0 0 1-3.064-2.664c-.114-1.585 1.079-2.95 2.664-3.064a2.867 2.867 0 0 1 3.072 2.868 2.804 2.804 0 0 1-2.672 2.86z"/></g></svg>',
          'menu': [
            {
              'title': '各年龄段人数',
              'id': 'wdr-tab-template-dw',
              handler: this.newtabHandlerTemplate,
              args: 'dw',
              'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M25.7 20.8l-2.3-2.5c-0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3 -0.3 0.4-0.3 1 0 1.4l1.7 1.9 -1.7 1.9c-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3l2.3-2.5C26.1 21.8 26.1 21.2 25.7 20.8z"/><path d="M14 24c0-0.3-0.1-0.5-0.3-0.7l-1.7-1.9 1.7-1.9c0.3-0.4 0.3-1 0-1.4 -0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3l-2.3 2.5c-0.3 0.4-0.3 1 0 1.4l2.3 2.5c0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3C13.9 24.5 14 24.3 14 24z"/><path d="M20.4 15.1c-0.1 0-0.2-0.1-0.3-0.1 -0.4 0-0.8 0.3-0.9 0.6l-4.1 11.1c-0.1 0.2-0.1 0.5 0 0.7 0.1 0.2 0.3 0.4 0.5 0.5C15.7 28 15.8 28 16 28c0.4 0 0.8-0.3 0.9-0.6l4.1-11.1C21.1 15.8 20.9 15.2 20.4 15.1z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>'
            }, {
              'title': '性别/年龄',
              'id': 'wdr-tab-template-xbnl',
              handler: this.newtabHandlerTemplate,
              args: 'xbnl',
              'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M25.7 20.8l-2.3-2.5c-0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3 -0.3 0.4-0.3 1 0 1.4l1.7 1.9 -1.7 1.9c-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3l2.3-2.5C26.1 21.8 26.1 21.2 25.7 20.8z"/><path d="M14 24c0-0.3-0.1-0.5-0.3-0.7l-1.7-1.9 1.7-1.9c0.3-0.4 0.3-1 0-1.4 -0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3l-2.3 2.5c-0.3 0.4-0.3 1 0 1.4l2.3 2.5c0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3C13.9 24.5 14 24.3 14 24z"/><path d="M20.4 15.1c-0.1 0-0.2-0.1-0.3-0.1 -0.4 0-0.8 0.3-0.9 0.6l-4.1 11.1c-0.1 0.2-0.1 0.5 0 0.7 0.1 0.2 0.3 0.4 0.5 0.5C15.7 28 15.8 28 16 28c0.4 0 0.8-0.3 0.9-0.6l4.1-11.1C21.1 15.8 20.9 15.2 20.4 15.1z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>'
            }, {
              'title': '职务职级层次',
              'id': 'wdr-tab-template-zwzjcc',
              handler: this.newtabHandlerTemplate,
              args: 'zwzjcc',
              'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M25.7 20.8l-2.3-2.5c-0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3 -0.3 0.4-0.3 1 0 1.4l1.7 1.9 -1.7 1.9c-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3l2.3-2.5C26.1 21.8 26.1 21.2 25.7 20.8z"/><path d="M14 24c0-0.3-0.1-0.5-0.3-0.7l-1.7-1.9 1.7-1.9c0.3-0.4 0.3-1 0-1.4 -0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3l-2.3 2.5c-0.3 0.4-0.3 1 0 1.4l2.3 2.5c0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3C13.9 24.5 14 24.3 14 24z"/><path d="M20.4 15.1c-0.1 0-0.2-0.1-0.3-0.1 -0.4 0-0.8 0.3-0.9 0.6l-4.1 11.1c-0.1 0.2-0.1 0.5 0 0.7 0.1 0.2 0.3 0.4 0.5 0.5C15.7 28 15.8 28 16 28c0.4 0 0.8-0.3 0.9-0.6l4.1-11.1C21.1 15.8 20.9 15.2 20.4 15.1z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>'
            }, {
              'title': '来源类型',
              'id': 'wdr-tab-template-lylx',
              handler: this.newtabHandlerTemplate,
              args: 'lylx',
              'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M25.7 20.8l-2.3-2.5c-0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3 -0.3 0.4-0.3 1 0 1.4l1.7 1.9 -1.7 1.9c-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3l2.3-2.5C26.1 21.8 26.1 21.2 25.7 20.8z"/><path d="M14 24c0-0.3-0.1-0.5-0.3-0.7l-1.7-1.9 1.7-1.9c0.3-0.4 0.3-1 0-1.4 -0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3l-2.3 2.5c-0.3 0.4-0.3 1 0 1.4l2.3 2.5c0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3C13.9 24.5 14 24.3 14 24z"/><path d="M20.4 15.1c-0.1 0-0.2-0.1-0.3-0.1 -0.4 0-0.8 0.3-0.9 0.6l-4.1 11.1c-0.1 0.2-0.1 0.5 0 0.7 0.1 0.2 0.3 0.4 0.5 0.5C15.7 28 15.8 28 16 28c0.4 0 0.8-0.3 0.9-0.6l4.1-11.1C21.1 15.8 20.9 15.2 20.4 15.1z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>'
            }, {
              'title': '培养使用建议类型',
              'id': 'wdr-tab-template-pysyjylx',
              handler: this.newtabHandlerTemplate,
              args: 'pysyjylx',
              'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M25.7 20.8l-2.3-2.5c-0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3 -0.3 0.4-0.3 1 0 1.4l1.7 1.9 -1.7 1.9c-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7 0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3l2.3-2.5C26.1 21.8 26.1 21.2 25.7 20.8z"/><path d="M14 24c0-0.3-0.1-0.5-0.3-0.7l-1.7-1.9 1.7-1.9c0.3-0.4 0.3-1 0-1.4 -0.2-0.2-0.4-0.3-0.6-0.3 -0.2 0-0.4 0.1-0.6 0.3l-2.3 2.5c-0.3 0.4-0.3 1 0 1.4l2.3 2.5c0.2 0.2 0.4 0.3 0.6 0.3 0.2 0 0.4-0.1 0.6-0.3C13.9 24.5 14 24.3 14 24z"/><path d="M20.4 15.1c-0.1 0-0.2-0.1-0.3-0.1 -0.4 0-0.8 0.3-0.9 0.6l-4.1 11.1c-0.1 0.2-0.1 0.5 0 0.7 0.1 0.2 0.3 0.4 0.5 0.5C15.7 28 15.8 28 16 28c0.4 0 0.8-0.3 0.9-0.6l4.1-11.1C21.1 15.8 20.9 15.2 20.4 15.1z"/><path d="M23 4H7v28h22V11L23 4zM8 31V5h14v7h6v19H8L8 31z"/></svg>'
            }
          ]
        }, {
          'title': '年龄段',
          'id': 'wdr-tab-options-ageRange',
          handler: newtabHandlerAgeRange,
          'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>年龄段设置</title><path fill="#555" d="M11.363 789.058l-.76-1.838a33.692 33.692 0 0 0 1.601-4.223l-2.327-2.328a31.444 31.444 0 0 0-4.142 1.691l-1.829-.76a32.88 32.88 0 0 0-1.83-4.101h-3.291a32.106 32.106 0 0 0-1.731 4.133l-1.83.76a33.556 33.556 0 0 0-4.206-1.609l-2.328 2.32a31.563 31.563 0 0 0 1.69 4.141l-.759 1.838a34.366 34.366 0 0 0-4.117 1.838v3.3a32.519 32.519 0 0 0 4.117 1.731l.759 1.829a33.633 33.633 0 0 0-1.608 4.223l2.327 2.328a32.986 32.986 0 0 0 4.133-1.699l1.83.76a31.481 31.481 0 0 0 1.862 4.108h3.291a32.194 32.194 0 0 0 1.732-4.133l1.837-.76a33.57 33.57 0 0 0 4.207 1.609l2.327-2.328a31.481 31.481 0 0 0-1.69-4.141l.76-1.838a32.532 32.532 0 0 0 4.108-1.829v-3.3a30.142 30.142 0 0 0-4.133-1.722zM.5 799.202a6.706 6.706 0 1 1 6.706-6.706A6.71 6.71 0 0 1 .5 799.202z"/></svg>'
        }, {
          'title': '导出',
          'id': 'wdr-tab-export-myexcel',
          handler: this.newtabHandlerExport,
          'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-17.5 774.5 36 36"><title>分析报表导出Excel</title><g fill="#555"><path d="M15.446 795.615l-4.289-6.461c-.346-.515-.803-.654-1.428-.654H7.788c-.186 0-.346-.029-.363.156-.008.076.017.07.059.137l4.76 7.108c.042.06.034.337-.017.38-.025.025-.067.219-.102.219H6.699c-.194 0-.354-.063-.363.125-.305 3.23-3.174 5.495-6.407 5.192-2.81-.263-5.039-2.329-5.3-5.14-.009-.195-.168-.178-.363-.178h-5.401c-.076 0-.144-.281-.144-.357 0-.025.008-.157.017-.175l4.76-7.203c.102-.16.05-.245-.109-.347-.06-.035-.118.082-.187.082h-1.94c-.616 0-1.199.145-1.553.658l-4.664 6.547c-.203.304-.545.586-.545.95v9.216c1 .911 1.267 1.646 2.187 1.629h27.625c.903.009 1.188-.709 1.188-1.611v-9.233c1-.373.157-.735-.054-1.04z"/><path d="M-3.674 783.5H-2.5v10.2c1 1.4 1.764 2.464 3.165 2.371 1.274-.083 1.835-1.097 2.835-2.371v-10.2h1.207c.346 0 .641-.04.65-.387.008-.151-.042-.193-.144-.311l-4.186-5.11c-.228-.287-.642-.302-.929-.073-.042.034-.076.081-.101.115l-4.135 5.172c-.22.271-.187.447.084.668.11.085.244-.074.38-.074z"/></g></svg>'
        }, {
          'title': '展开',
          'id': 'wdr-tab-expandAll',
          handler: myexpandAll,
          'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="-305.5 396.5 36 36" class="wdr-ui-element"><title>全部展开</title><path fill="#555" d="M-279.351 408.5h8.976c.064 0 .126-.067.167-.025.021.052.021.055 0 .107l-2.053 20.701c-.01.117-.104.217-.219.217h-30.102c-.116 0-.21-.104-.221-.22l-1.989-16.009c-.022-.041-.022.124 0 .083.042-.054.115.146.178.146h21.198c.87 0 1.665-.726 2.053-1.499l1.812-3.446a.414.414 0 0 1 .2-.055zm-4.052 2.473c.084-.011.162-.052.194-.126l1.813-3.288c.408-.754 1.196-1.059 2.054-1.059h7.842v-2.637c0-1.102-.83-2.166-1.929-2.25-.053 0-.183-.113-.235-.113h-18.328c-.104 0-.188.006-.241-.09.01-1.1-.858-1.91-1.958-1.91h-6.902c-1.226 0-2.406.864-2.406 2.089v9.426l20.096-.042z" class="wdr-ui-element"></path></svg>'
        }, {
          'title': '折叠',
          'id': 'wdr-tab-collapseAll',
          handler: mycollapseAll,
          'icon': '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" class="wdr-ui-element"><title>全部折叠</title><path d="M30.9 10.6C30.8 10.4 30.2 10 30 10h-1V8c0-0.4-0.6-1-1-1H15l-1-2H8C7.6 5 7 5.6 7 6v4H6c-0.2 0-0.8 0.4-0.9 0.6 -0.1 0.1-0.2 0.3-0.1 0.5l2.1 19.5C7.2 30.8 7.7 31 8 31h20c0.3 0 0.8-0.2 0.9-0.5l2.1-19.5C31 10.9 31 10.7 30.9 10.6zM28 30H8L6 11h24L28 30z"></path></svg>'
        })
        return tabs
      }
    },
    beforeUpdate () {
      return false
    },
    newtabHandlerExport () {
      this.webdatarocks.expandAllData()
      this.webdatarocks.exportTo('excel')
    },
    newtabHandlerTemplate (temp) {
      switch (temp) {
        case 'dw':
          this.myrows = [
            {
              'uniqueName': '所属处室'
            },
            {
              'uniqueName': '单位名称'
            }
          ]
          this.mycolumns = [
            {
              'uniqueName': '年龄段'
            }
          ]
          break
        case 'xbnl':
          this.myrows = [
            {
              'uniqueName': '性别'
            }
          ]
          this.mycolumns = [
            {
              'uniqueName': '年龄段'
            }
          ]
          break
        case 'zwzjcc':
          this.myrows = [
            {
              'uniqueName': '所属处室'
            },
            {
              'uniqueName': '单位名称'
            }
          ]
          this.mycolumns = [
            {
              'uniqueName': '职务职级层次'
            }
          ]
          break
        case 'lylx':
          this.myrows = [
            {
              'uniqueName': '所属处室'
            },
            {
              'uniqueName': '单位名称'
            }
          ]
          this.mycolumns = [
            {
              'uniqueName': '来源类型'
            }
          ]
          break
        case 'pysyjylx':
          this.myrows = [
            {
              'uniqueName': '所属处室'
            },
            {
              'uniqueName': '单位名称'
            }
          ]
          this.mycolumns = [
            {
              'uniqueName': '培养使用建议类型'
            }
          ]
          break
      }
      this.webdatarocks.setReport({
        'dataSource': {
          'dataSourceType': 'json',
          'data': this.mydata
        },
        'slice': {
          'rows': this.myrows,
          'columns': this.mycolumns,
          'measures': [
            {
              'uniqueName': '姓名',
              'aggregation': 'count'
            }
          ]
        }
      })
      this.webdatarocks.expandAllData()
    }
  },
  watch: {
    timestamp: {
      handler (newVal, oldVal) {
        console.log('timestamp:' + newVal)
        console.log(this.url)
        console.log(this.para)
        this.getData()
      },
      immediate: true
    }
    // myheight: {
    //   handler (val) {
    //     if (this.webdatarocks) {
    //       console.log('webdatarocksmyheight:' + val)
    //       // this.webdatarocks.height = val
    //       this.webdatarocks.setOptions({
    //         height: val
    //       })
    //       this.webdatarocks.refresh()
    //     }
    //   },
    //   immediate: true
    // }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

/* @import 'webdatarocks/webdatarocks.min.css'; */
@import 'webdatarocks/webdatarocks.css';
/* @import 'webdatarocks/theme/default/webdatarocks.less'; */
/* #wdr-tab-export-pdf{
  display: none !important;
}
#wdr-tab-export-print{
  display: none !important;
}
#wdr-tab-export-html{
  display: none !important;
}
#wdr-tab-save{
  display: none !important;
}
#wdr-tab-open{
  display: none !important;
}
#wdr-tab-connect{
  display: none !important;
} */
.wdr-credits{
  display: none !important;
}
</style>
